import React, { useState } from 'react';
import { Layout, Breadcrumb } from 'antd';
const { Header } = Layout;
import { connect } from 'dva';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';

const HeaderView = ({ dispatch, home }) => {
  const collapsed = home.collapsed;

  const toggle = () => {
    dispatch({
      type: 'home/changeLayoutCollapsed',
      payload: collapsed,
    });
  };


  const logout=()=>{
    dispatch({
      type: 'logins/logout',
    });
  }

  return (
    <Header className="site-layout-background" style={{ padding: 0 }}>
      {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
        className: 'trigger',
        onClick: toggle,
      })}
      <Breadcrumb>
        <Breadcrumb.Item>首页</Breadcrumb.Item>
        <Breadcrumb.Item>系统管理</Breadcrumb.Item>
        <Breadcrumb.Item>用户管理</Breadcrumb.Item>
      </Breadcrumb>

      <a  onClick={logout}  style={{"float":"right",marginRight:'30px'}}>退出登录</a>
    </Header>
  );
};

const mapStateToProps = ({ home }) => {
  return {
    home,
  };
};

export default connect(mapStateToProps)(HeaderView);
